const moveTemplate = document.createElement("template");
moveTemplate.innerHTML = /*html*/ `
      <style>
        :host {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.3);
          z-index: 999999 !important;
          padding: 20px;
          display: none;
          justify-content: center;
          align-items: center;
          -webkit-app-region: drag;
        }

        :host(body ~ ){
          position: fixed;
        }

    
      </style>
      <div class="move-box">
      </div>
`;

export default class LiuMove extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: "closed" });
    const content = moveTemplate.content.cloneNode(true);
    this.state = ''; 

    if(window.ipcRenderer){
      window.ipcRenderer.on("move", (event) => {
        this.style.display = 'block';
        this.state = true;
        window.closeMenu()
      });
    }

    window.addEventListener("blur",  () => {
      let css = window.getComputedStyle(this)
      let displayStyle = css.display;

      if(displayStyle === 'block' && window.sendSaveData){
        let data = window.getData();
        window.sendSaveData(data);
      }

      this.style.display = "none";
    });



    shadow.appendChild(content);
  }

  async connectedCallback() {
  }
}
